<template>
  <div id="team-report-container">
    <div class="item-box">
      <div class="chart-title">优化师数据
      </div>
      <chart-op v-loading="loading1" type="op" id="opChart" :chart-data="opData"
                ref="opChartRef"></chart-op>
      <div class="reload" v-show="reload1">
        <el-button type="info" @click="getOpData">重新加载</el-button>
      </div>
    </div>
    <div class="item-box">
      <div class="chart-title">设计师数据
      </div>
      <chart-op v-loading="loading2" type="design" id="designChart" :chart-data="designData"
                ref="designChartRef"></chart-op>
      <div class="reload" v-show="reload2">
        <el-button type="info" @click="getDesignData">重新加载</el-button>
      </div>
    </div>
    <div class="item-box">
      <div class="chart-title">优化师设计师组合数据
        <el-tooltip content="统计数据只能匹配到系统上的已知素材，实际结果可能存在误差" placement="right">
          <el-image
            style="width: 13px; height: 13px"
            :src="images"
            fit="fit">
          </el-image>
        </el-tooltip>
      </div>
      <chart-op v-loading="loading3" type="op-design" id="opDesignChart" :chart-data="opDesignData"
                ref="opDesignChartRef"></chart-op>
      <div class="reload" v-show="reload3">
        <el-button type="info" @click="getOpDesignData">重新加载</el-button>
      </div>
    </div>
    <div class="item-box">
      <div class="chart-title">设计师优化师组合数据
        <el-tooltip content="统计数据只能匹配到系统上的已知素材，实际结果可能存在误差" placement="right">
          <el-image
            style="width: 13px; height: 13px"
            :src="images"
            fit="fit">
          </el-image>
        </el-tooltip>
      </div>
      <chart-op v-loading="loading4" type="design-op" id="designOpChart" :chart-data="designOpData"
                ref="designOpChartRef"></chart-op>
      <div class="reload" v-show="reload4">
        <el-button type="info" @click="getDesignOpData">重新加载</el-button>
      </div>
    </div>
    <!--详情弹窗-->
  </div>
</template>

<script>
import ChartOp from "@/views/dataReport/team-report/components/ChartOp";
import {
  queryReviewDesignData,
  queryReviewDesignOpData,
  queryReviewOpData,
  queryReviewOpDesignData
} from "@/api/dataReport/review-report";

export default {
  name: "ReTeamReport",
  props: {
    reportId: {
      type: Number | String,
      required: true
    }
  },
  components: {
    ChartOp,
  },
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      // 重新加载
      reload1: false,
      reload2: false,
      reload3: false,
      reload4: false,
      // 优化师团队报表数据
      opData: [],
      // 设计师团队报表数据
      designData: [],
      // 优化师/设计师组合数据
      opDesignData: [],
      // 设计师/优化师组合数据
      designOpData: [],
      images: '/img/icon/error.png',
    }
  },
  created() {
    // 数据加载
    this.initData()

  },
  computed: {},
  watch: {},
  methods: {
    // 获取优化师数据
    async getOpData() {
      this.loading1 = true
      this.reload1 = false
      const {data: res} = await queryReviewOpData({reportId: this.reportId}).catch(err => {
        this.$message.error('获取优化师数据加载失败，请重新加载')
        this.reload1 = true
      })
      this.loading1 = false
      if (res.code !== 200) return this.$message.error('获取优化师数据失败')
      this.opData = res.data
      this.$nextTick(() => {
        this.$refs.opChartRef.initChart()
      })
    },
    // 获取设计师数据
    async getDesignData() {
      this.loading2 = true
      this.reload2 = false
      const {data: res} = await queryReviewDesignData({reportId: this.reportId}).catch(err => {
        this.$message.error('获取优化师数据加载失败，请重新加载')
        this.reload2 = true
      })
      this.loading2 = false
      if (res.code !== 200) return this.$message.error('获取设计师数据失败')
      this.designData = res.data
      this.$nextTick(() => {
        this.$refs.designChartRef.initChart()
      })
    },
    // 获取优化师设计师组合数据
    async getOpDesignData() {
      this.loading3 = true
      this.reload3 = false
      const {data: res} = await queryReviewOpDesignData({reportId: this.reportId}).catch(err => {
        this.$message.error('获取优化师数据加载失败，请重新加载')
        this.reload3 = true
      })
      this.loading3 = false
      if (res.code !== 200) return this.$message.error('获取优化师设计师组合数据失败')
      this.opDesignData = res.data
      this.$nextTick(() => {
        this.$refs.opDesignChartRef.initChart()
      })
    },
    // 获取设计师优化师组合数据
    async getDesignOpData() {
      this.loading4 = true
      this.reload4 = false
      const {data: res} = await queryReviewDesignOpData({reportId: this.reportId}).catch(err => {
        this.$message.error('获取优化师数据加载失败，请重新加载')
        this.reload4 = true
      })
      this.loading4 = false
      if (res.code !== 200) return this.$message.error('获取设计师优化师组合数据失败')
      this.designOpData = res.data
      this.$nextTick(() => {
        this.$refs.designOpChartRef.initChart()
      })
    },
    async initData() {
      await Promise.all([
        this.getOpData(),
        this.getDesignData(),
        this.getOpDesignData(),
        this.getDesignOpData(),
      ]);
    }
  }
}
</script>

<style lang="scss" scoped>
#team-report-container {
  .item-box {
    position: relative;
    margin-bottom: 100px;

    .chart-title {
      font-size: 18px;
      font-family: SimHei;
      font-weight: bold;
      color: #101010;
      box-sizing: border-box;

      &:before {
        content: '';
        display: inline-block;
        width: 13px;
        height: 32px;
        background-color: #FF944B;
        border-radius: 25%;
        vertical-align: -40%;
        margin-right: 20px;
      }
    }

    .reload {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 99999;
    }
  }
}

.drawer-box {
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 90%;
}

</style>
